<template>
	<div class="login-container">
		<img :src="src" alt="" />
		<my-input
			class="hm-input"
			v-model="user.username"
			:reg="/^1[3|4|5|6|7|8|9]\d{9}$/"
			placeholder="请输入手机号"
			ref="userName"
		/>
		<my-input
			class="hm-input"
			v-model="user.password"
			placeholder="请输入密码"
			ref="passWord"
		/>
		<p>
			<span>
				没有账号?
				<em @click="handelRegister">去注册</em>
			</span>
		</p>
		<van-button
			class="loginBtn"
			round
			icon="star-o"
			type="danger"
			block
			size="large"
			@click="login"
			>登录</van-button
		>
	</div>
</template>

<script>
	import { loginApi } from "@/api/index";
	import storage from "@/utils/storage";
	import srcImg from "@/assets/images/u339.png";
	// 引入组件
	import MyInput from "@/components/myInput";
	export default {
		components: {
			MyInput,
		},
		data() {
			return {
				src: srcImg,
				user: {
					username: "13680638720",
					password: "123466",
				},
			};
		},
		methods: {
			handelRegister() {
				this.$router.push("/register");
			},
			// 登录
			async login() {
				console.log(this.$refs.passWord.isOk, this.$refs.userName.isOk);
				if (!this.$refs.userName.isOk) {
					this.$toast("账号不合法");
					return;
				} else if (!this.$refs.passWord.isOk) {
					this.$toast("密码不合法");
					return;
				} else {
					const {
						data: { data, message },
					} = await loginApi(this.user);

					if (message == "登录成功") {
						this.$toast(message);
						// 存储到本地
						const {
							user: { id },
							token,
						} = data;
						storage.setUser({ id, token });
						// 跳转到首页
						this.$router.push({ path: "/home", query: { id } });
					} else {
						this.$toast(message);
					}
					console.log(data, message);
				}
			},
		},
	};
</script>

<style lang="less" scoped>
	.login-container {
		text-align: center;
		padding: 10px 20px;
		& > p {
			text-align: right;
			em {
				margin-left: 20px;
				color: #96a5ff;
			}
		}
		.loginBtn {
			margin-top: 25px;
		}
	}
	.hm-input {
		text-align: left;
		color: #666;
		// border: none;
		// // border-bottom: 5px solid green;
		// width: 100%;
		padding: 10px 0;
		margin-bottom: 50px;
	}
</style>